<template>
    <div class="fluid">
        <div class="container">
            <p>行业定制服务</p>
            <p style="font-weight:100">服务近<span>5万</span>+企业客户，依托一系列实践中打磨的技术与产品，</p>
            <p style="font-weight:100">基于企业痛点与需求，针对性的提供各行业大数据智能营销解决方案。</p>
            <ul class="list1">
                <li v-for="(item,index) in list1" :key="index">
                    <img src="../../assets/img/hyfaAll/1.png">
                    <span style="font-weight:100">{{item}}</span>
                </li>
            </ul>
            <button @click="toSection2">立即体验</button>
            <img src="../../assets/img/hyfaAll/2.png">
            <img src="../../assets/img/hyfaAll/3.png">
            <img src="../../assets/img/hyfaAll/4.png">
            <img src="../../assets/img/hyfaAll/5.png">
            <img src="../../assets/img/hyfaAll/6.png">
            <img src="../../assets/img/hyfaAll/7.png">
            <img src="../../assets/img/hyfaAll/03.png">
        </div>
    </div>
</template>
<script>
export default {
  data() {
    return {
      list1: ["精准", "高效", "实时"]
    };
  },
  methods: {
    toSection2(){
      window.scrollTo(0, this.$el.offsetHeight)
    }
  }
};
</script>
<style scoped>
.fluid {
  width: 100%;
  height: 574px;
  background: url("../../assets/img/hyfaAll/0.png");
  background-position: center;
}
.container {
  width: 1200px;
  margin: 0 auto;
  position: relative;
  height: 100%;
  overflow: hidden;
}
.container > p:nth-child(1) {
  margin-top: 160px;
  font-size: 36px;
}
.container > p:nth-child(2) {
  font-size: 16px;
  margin-top: 26px;
}
.container > p:nth-child(2) > span {
  font-weight: bold;
}
.container > p:nth-child(3) {
  font-size: 16px;
}
.list1 {
  margin-top: 20px;
  overflow: hidden;
  margin-left: -40px;
}
.list1 > li {
  float: left;
  margin-left: 40px;
}
.list1 > li > span {
  font-size: 16px;
  margin-left: 5px;
  font-weight: bold;
}
.container > button {
  margin-top: 80px;
  width: 124px;
  height: 42px;
  border-radius: 20px;
  background: #ee4041;
  font-size: 16px;
  color: #fff;
     -moz-box-shadow: 0px 4px 19px #ed9191;
  -webkit-box-shadow: 0px 4px 19px #ed9191;
  box-shadow: 0px 4px 19px #ed9191;
  margin-left: 10px;
}
.container>img:nth-child(6){
    position: absolute;
    top:172px;
    right: 520px;
}
.container>img:nth-child(7){
    position: absolute;
    top:194px;
    right: 422px;
}
.container>img:nth-child(8){
    position: absolute;
    top:388px;
    right: 407px;
}
.container>img:nth-child(9){
    position: absolute;
    top:97px;
    right: 112px;
}
.container>img:nth-child(10){
    position: absolute;
    top:368px;
    right: 83px;
}
.container>img:nth-child(11){
    position: absolute;
    top:244px;
    right: 49px;
}
.container>img:nth-child(12){
    position: absolute;
    top:120px;
    right: 190px;
}
</style>
